<template>
    <div class="modal-wrap">
        <a-modal title="路标管理批量设置" centered v-model:visible="visible" :width="500" okText="保存" @ok="handleSave" @cancel="handleCancel">
            <a-form ref="ruleFormRef" layout="inline" :model="form" :rules="rules">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="是否进行路标规划" name="isSignpostPlan">
                            <a-select placeholder="请选择" v-model:value="form.isSignpostPlan" style="width: 80px">
                                <a-select-option key="1">是</a-select-option>
                                <a-select-option key="0">否</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="路标规划周期" name="signpostPlanPeriod">
                            <a-select placeholder="请选择" v-model:value="form.signpostPlanPeriod" style="width: 100px">
                                <a-select-option key="1"> 季度 </a-select-option>
                                <a-select-option key="2"> 半年度 </a-select-option>
                                <a-select-option key="3"> 年度 </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { deepClone } from '@/utils/util';
import api from '@/api';
import { defineComponent, reactive, toRefs, ref, unref, nextTick } from 'vue';
export default defineComponent({
    emits: ['success'],
    setup(_, { emit }) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            form: {
                isSignpostPlan: null,
                signpostPlanPeriod: null
            },
            list: [],
            visible: false
        });
        const rules = {
            isSignpostPlan: [{ required: true, message: '是否进行路标规划不能为空', trigger: 'blur' }],
            signpostPlanPeriod: [{ required: true, message: '路标规划周期不能为空', trigger: 'blur' }]
        };
        const open = (list) => {
            state.list = deepClone(list);
            state.visible = true;
            state.form = {
                isSignpostPlan: null,
                signpostPlanPeriod: null
            };
            nextTick(() => {
                unref(ruleFormRef) && unref(ruleFormRef).clearValidate();
            });
        };
        const handleSave = async () => {
            unref(ruleFormRef)
                .validate()
                .then(async () => {
                    const query = state.list.map((item) => ({
                        ...item,
                        ...state.form
                    }));
                    const { success } = await api.signpostManagementModel.save(query);
                    if (success) {
                        emit('success', state.form);
                        handleCancel();
                    }
                });
        };
        const handleCancel = () => {
            state.visible = false;
        };
        return {
            ruleFormRef,
            ...toRefs(state),
            rules,
            open,
            handleSave,
            handleCancel
        };
    }
});
</script>

<style scoped lang="less">
.modal-wrap {
    ::v-deep(.ant-form-inline .ant-form-item-label) {
        min-width: 120px !important;
    }
}
</style>